<template>
  <div class="table">
      <!--表1桑园面积统计表T_MulAreaStatist-->
      <div class="divSearch">
            <Row>
                <Col span="24" class="col-margin">
                    填报年度：
                    <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 100px" @on-change="GetData()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                    </Select>
                    <Button icon="ios-search" type="ghost" @click="GetData()" class="ButtonStyle">
                        查询
                    </Button>
                    <Button icon="ios-download" type="primary" @click="ExcelDown()" class="searchButton" style="float:right;width: 100px;">数据导出</Button>
                    <Upload :on-success="handleSuccess" :action="GetPostUrl()" style="float:right;width: 100px;" v-show="DataModel.ReportStatus <3">
                        <Button type="primary" icon="ios-cloud-upload-outline" class="searchButton" >数据导入</Button>
                    </Upload>
                    <Button icon="ios-cloud-download" type="primary" @click="TmpDown()" class="searchButton" style="width: 100px;">模板下载</Button>
                    <!-- <label style="float:right;padding: 6px;font-size:16px;">当前状态:
                        <span v-if="DataModel.ReportStatus==0" class="Error"></span> 
                        <span v-else-if="DataModel.ReportStatus==1" class="NoReport">未填写</span>
                        <span v-else-if="DataModel.ReportStatus==2" class="AlreadyReport">已填写</span>
                        <span v-else-if="DataModel.ReportStatus==3" class="UpReport">已上报</span>
                        <span v-else-if="DataModel.ReportStatus==4" class="Success">审核通过</span>               
                    </label> -->
                </Col>
            </Row>
      </div>
      <Row>
          <Col>
            <Form ref="DataModel" :model="DataModel" :rules="ruleModel">
              <table class="reptable">
                  <caption>
                    <label style="float:left">{{searchModel.FillInYear}}表1桑园面积调查</label>
                    <label style="float:right">当前状态:
                    <Poptip trigger="hover" placement="left-start" v-model="visible" :content="ReportOpinion" v-if="DataModel.ReportStatus==0">
                      <span  class="Error">重新填写</span> 
                    </Poptip>
                    <span v-else-if="DataModel.ReportStatus==1" class="NoReport">未填写</span>
                    <span v-else-if="DataModel.ReportStatus==2" class="AlreadyReport">已填写</span>
                    <span v-else-if="DataModel.ReportStatus==3" class="UpReport">已上报</span>
                    <span v-else-if="DataModel.ReportStatus==4" class="Success">审核通过</span>
                    <span v-else class="NoReport">无需填报</span>                    
                    </label><br/>
                </caption>
                  <tr style="height:40px;">
                        <th>现有桑园面积<br/>(亩)</th>
                        <th>投产桑园面积<br/>(亩)</th>
                        <!--<th>去冬今春新栽桑面积(亩)</th>-->
                        <th>高产桑园面积<br/>(亩)</th>
                        <th>中产桑园面积<br/>(亩)</th>
                        <th>低产桑园面积<br/>(亩)</th>
                        <th>新栽桑面积<br/>(亩)</th>                                                
                        <th>不用于养蚕的桑园面积<br/>(亩)</th>
                        <th>挖毁桑园面积<br/>(亩)</th>
                    </tr>
                    <tr style="height:40px;">
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldNowMulArea" placement="bottom">
                                <Form-item prop="NowMulArea">
                                <Input style="display:none;" v-model="DataModel.Id"></Input>
                                <Input style="display:none;" v-model="DataModel.ReportId"></Input>
                                {{DataModel.NowMulArea|decimal}}
                                </Form-item> 
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldIntoMulArea" placement="bottom">                            
                                <Form-item prop="IntoMulArea">
                                <Input :readonly="true" v-model="DataModel.IntoMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <!--<td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldNewPlantMulArea">                            
                                <Form-item prop="NewPlantMulArea">
                                <Input v-model="DataModel.NewPlantMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>-->
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldHighMulArea" placement="bottom">                            
                                <Form-item prop="HighMulArea">
                                <Input v-model="DataModel.HighMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldMidMulArea" placement="bottom">                            
                                <Form-item prop="MidMulArea">
                                <Input v-model="DataModel.MidMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldLowMulArea" placement="bottom">                            
                                <Form-item prop="LowMulArea">
                                <Input v-model="DataModel.LowMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldNewlyMulArea" placement="bottom">                            
                                <Form-item prop="NewlyMulArea">
                                <Input v-model="DataModel.NewlyMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldNotUseMulArea" placement="bottom">                            
                                <Form-item prop="NotUseMulArea">
                                <Input v-model="DataModel.NotUseMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                          <td>
                            <Poptip trigger="focus" title="上年数据" :content="DataModel.OldDestroyMulArea" placement="bottom">                            
                                <Form-item prop="DestroyMulArea">
                                <Input v-model="DataModel.DestroyMulArea"></Input>
                                </Form-item>
                            </Poptip>
                          </td>
                      </tr>
              </table>
            </Form>
          <div class="divButton">
              <Button type="primary" @click="save('DataModel')" :disabled="DataModel.ReportStatus < 3 && BtnSaveStatus ? false:true">保存</Button>
              <Button type="primary" @click="DataUp()" :disabled="DataModel.ReportStatus == 2 ? false:true">上报</Button>
          </div>
          <Alert  banner type="error">
              <p style="color:red;">填报说明:</p>
              <p>1.现有桑园面积指县域内所有桑园面积，现有桑园面积=投产桑园面积+新栽桑园面积+不用于养蚕的桑园面积；</p> 
              <p>2.投产桑园面积=高产桑园面积+中产桑园面积+低产桑园面积；</p>
              <p>3.高产桑园面积是指一年亩桑养蚕量在3张以上的桑园；4.中产桑园面积是指一年亩桑养蚕量在1.5张至3张之间的桑园；</p>
              <p>5.低产桑园面积是指一年亩桑养蚕量低于1.5张的桑园； 6.新栽桑面积指当年新栽桑园的面积；</p>
              <p>7.不用于养蚕的桑园面积是指桑园成活后不用于蚕茧生产的桑园，包括生态桑、弃管桑园等;</p>
              <p>8.挖毁桑园面积是指上年统计还在，当年统计已不存在的桑园;</p>
              <!-- ，其等于当年桑园面积-上年桑园面积 -->
              <p style="color:red;font-size: 16px;">特别注意：若指标项没有数据，请直接填“0”</p>
              <span slot="desc"></span>
          </Alert>
          </Col>
      </Row>
  </div>
</template>
<script>
export default {
  data() {
    //整数或保留一位小数
    const validateData = (rule, value, callback) => {
      var reg = /\S/;
      var temp = /^[0-9]\d*(\.\d+)?$/;//数字验证
      var p=/^[0-9]+([.]{1}[0-9]{1})?$/;//匹配整数或带一个小数
      if (reg.test(value)) {
        if (temp.test(value) == false) 
        {
          callback(new Error("必须是大于等于0的数字"));
        }
        else {
          if(p.test(value)==false)
          {
            callback(new Error("只能保留一位小数"));
          }
          else{
            callback();
          }
        }
      } 
      else {
        callback(new Error("不能为空"));
      }
    };
    return {
      visible:true,
      self: this,
      CreateYearList: this.GetGroupDict("ReportYear"), //周期
      CurrentYear: this.GetCurrentYear(), //当前年度
      CycleList: this.GetGroupDict("ReportCycle"), //周期
      BtnSaveStatus: false, //保存按钮开关
      //查询模型：根据需求删除不不要查询条件
      searchModel: {
        ReportCode: "MulAreaStatist",
        FillInYear: "",
        TimesType: "",
        AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
        PageNumber: 1,
        PageSize: 20
      },
      ReportOpinion:'',
      DataModel: {
        //编辑模型
        ReportCode: "MulAreaStatist",
        FillInYear: "",
        TimesType: "",
        AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
        Id: 0,
        ReportId: "",
        NowMulArea: "",
        IntoMulArea: "",
        NewPlantMulArea: "",
        HighMulArea: "",
        MidMulArea: "",
        LowMulArea: "",
        NewlyMulArea: "",
        NotUseMulArea: "",
        DestroyMulArea: "",
        //上一年数据
        OldId: 0,
        OldReportId: "",
        OldNowMulArea: "",
        OldIntoMulArea: "",
        OldNewPlantMulArea: "",
        OldHighMulArea: "",
        OldMidMulArea: "",
        OldLowMulArea: "",
        OldNewlyMulArea: "",
        OldNotUseMulArea: "",
        OldDestroyMulArea: ""
      },
      ruleModel: {
        NowMulArea: [{ validator: validateData, trigger: "blur" }],
        IntoMulArea: [{ validator: validateData, trigger: "blur" }],
        NewPlantMulArea: [{ validator: validateData, trigger: "blur" }],
        HighMulArea: [{ validator: validateData, trigger: "blur" }],
        MidMulArea: [{ validator: validateData, trigger: "blur" }],
        LowMulArea: [{ validator: validateData, trigger: "blur" }],
        NewlyMulArea: [{ validator: validateData, trigger: "blur" }],
        NotUseMulArea: [{ validator: validateData, trigger: "blur" }],
        DestroyMulArea: [{ validator: validateData, trigger: "blur" }]
      },
      ctx: this, //table数据上下文
      clientHeight: window.innerHeight - 270 //表格默认高度
    };
  },
  mounted() {
    //table高度计算方法
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientHeight = window.innerHeight - 220;
      })();
    };
  },
  methods: {
    //获取今往年数据
    GetData: function() {
      var self = this;
      var model = new Object();
      model.ReportCode = self.searchModel.ReportCode;
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        model.FillInYear = self.searchModel.FillInYear;
      } else {
        model.FillInYear = self.CurrentYear + "年"; //填报年度-----数据字典值
        self.searchModel.FillInYear = self.CurrentYear + "年";
      }
      model.AreaCode = self.searchModel.AreaCode;
      self.DataModel = {}; //清空当前数据
      self.$http.post("Report/PostData", model).then(
        //获取数据编辑项的值
        function(res) {
          if (res.data.list.status == 2 || res.data.list.status == 1) {
            self.DataModel = res.data.list.model;
            self.ReportOpinion=res.data.Opinion;
            self.BtnSaveStatus = true;
          } else {
            self.DataModel = res.data.list.model;
            //self.DataModel.ReportId = res.data.list.model.ReportId;
            self.$Modal.warning({
              title: "提示信息",
              content: res.data.list.message
            });
            self.BtnSaveStatus = false;
          }
        }
      );
    },
    checkEmpty(value) {
      if (value != null && value != "" && value != " "||value==0||value=="0") {
        return true;
      } else {
        return false;
      }
    },
    //保存方法
    save(name) {
      var self = this;
      self.DataModel.ReportCode = self.searchModel.ReportCode;
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        self.DataModel.FillInYear = self.searchModel.FillInYear;
      } else {
        self.DataModel.FillInYear = self.CurrentYear + "年"; //填报年度-----数据字典值
        self.searchModel.FillInYear = self.CurrentYear + "年";
      }
      self.DataModel.AreaCode = self.searchModel.AreaCode;
      this.$refs[name].validate((valid) => {
          if (valid) {
            this.$http.put("MulAreaStatist", self.DataModel).then(function(res) {
              if (res.data.status == 1) {
                self.GetData();
                self.$Notice.success({
                  title: "数据保存成功！",
                  desc: false
                });
              } else {
                self.$Modal.warning({
                  title: "提示信息",
                  content: "更新失败,请与管理员联系!"
                });
              }
            });
          } else {
              this.$Notice.error({
                    title: '数据验证出错,请根据提示操作后再试!',
                    desc: '',
                });
          }
      })
    },
    //数据上报
    DataUp() {
      var self = this;
      self.$Modal.confirm({
        title: "提示信息",
        content: "<p>数据上报后，不能再更改，是否继续上报？</p>",
        onOk: () => {
          var model = new Object();
          model.Id = self.DataModel.ReportId;
          model.reportType = "3";
          model.strMsg = "";
          this.$http.post("Report/PostUpStatus", model).then(function(res) {
            if (res.data.status == 1) {
              self.$Notice.success({ title: "数据上报成功！", desc: false });
              self.GetData();
            } else {
              self.$Modal.error({ title: "提示信息", content: "数据上报失败!" });
            }
          });
        }
      });
    },
    //导入
    GetPostUrl() {
      var url =
        this.$http.defaults.baseURL +
        "Report/PostImportData?FillInYear="+this.searchModel.FillInYear+"&&ReportCode=" +
        this.searchModel.ReportCode +
        "&&AreaCode=" +
        this.searchModel.AreaCode;
      return url;
    },
    handleSuccess(res, file) {
      var self = this;
      self.GetData();
      self.$Notice.success({
        title: "数据导入成功！",
        desc: false
      });
    },
    //导出
    ExcelDown: function() {
      var self = this;
      var model = new Object();
      model.ReportCode = self.searchModel.ReportCode;
      if (
        self.searchModel.FillInYear != null &&
        self.searchModel.FillInYear != ""
      ) {
        model.FillInYear = self.searchModel.FillInYear;
      } else {
        model.FillInYear = self.CurrentYear + "年"; //填报年度-----数据字典值
        self.searchModel.FillInYear = self.CurrentYear + "年";
      }
      model.AreaCode = self.searchModel.AreaCode;
      window.open(
        this.$http.defaults.baseURL +
          "MulAreaStatist/GetExcelData?ReportCode=" +
          model.ReportCode +
          "&&FillInYear=" +
          model.FillInYear +
          "&&AreaCode=" +
          model.AreaCode
      );
    },
    //模板下载
    TmpDown: function() {
      window.open(this.$http.defaults.baseURL +"Report/GetTemplateData?ReportCode=" +this.searchModel.ReportCode);
    },
    sumTotal(){
      var IntoMulArea =this.DataModel.IntoMulArea == null? 0: Number(this.DataModel.IntoMulArea);
      var NewlyMulArea =this.DataModel.NewlyMulArea == null? 0: Number(this.DataModel.NewlyMulArea);
      var NotUseMulArea =this.DataModel.NotUseMulArea == null? 0: Number(this.DataModel.NotUseMulArea);
      this.DataModel.NowMulArea =parseFloat(IntoMulArea +NewlyMulArea+NotUseMulArea).toFixed(1);
      var HighMulArea =this.DataModel.HighMulArea == null? 0: Number(this.DataModel.HighMulArea);
      var MidMulArea = this.DataModel.MidMulArea == null? 0: Number(this.DataModel.MidMulArea);
      var LowMulArea =this.DataModel.LowMulArea == null? 0: Number(this.DataModel.LowMulArea);
      this.DataModel.IntoMulArea =parseFloat(HighMulArea + MidMulArea + LowMulArea).toFixed(1);
    }
  },
  computed: {},
  //创建Vue页面方法
  created: function() {
    //创业Vue前调用获取this.datas: {},//table数据对象
    this.GetData();
  },
  watch: {
    'DataModel.IntoMulArea': function(newValue) {
       this.sumTotal();
    },
    'DataModel.NewlyMulArea': function(newValue) {
       this.sumTotal();
    },
    'DataModel.NotUseMulArea': function(newValue) {
       this.sumTotal();
    },
    'DataModel.HighMulArea': function(newValue) {
       this.sumTotal();
    },
    'DataModel.MidMulArea': function(newValue) {
       this.sumTotal();
    },
    'DataModel.LowMulArea': function(newValue) {
       this.sumTotal();
    },
  }
};
</script>
